<template>
    <div :class="['cvu-poptip', `cvu-poptip-${theme}`, { 'cvu-poptip-disarrow': disArrow }]">
        <Poptip 
            :title="title" 
            :trigger="trigger" 
            :content="content"
            :placement="placement"
            :width="width"
            :confirm="confirm"
            :okText="okText"
            :cancelText="cancelText"
            :transfer="transfer"
            :popperClass="popperClass"
            :wordWrap="wordWrap"
            :padding="padding"
            :disabled="disabled"
            :offset="offset"
            @on-popper-show="onPopperShow"
            @on-popper-hide="onPopperHide"
            @on-ok="onOk"
            @on-cancel="onCancel"
        >
            <slot />
            <div v-if="$slots.title" slot="title">
                <slot name="title" />
            </div>
            <div v-if="$slots.content" slot="content">
                <slot name="content" />
            </div>
        </Poptip>
    </div>
</template>
<script>
import common from '../../../until/common'
export default {
    name: 'cvu-poptip',
    props: {
        // 主题
        theme: {
            type: String,
            default: 'light'
        },
        // 触发方式，可选值为hover（悬停）click（点击）focus（聚焦）,在 confirm 模式下，只有 click 有效
        trigger: {
            type: String,
            default: 'click'
        },
        // 显示的标题
        title: {
            type: [String, Number]
        },
        // 显示的正文内容，只在非 confirm 模式下有效
        // 当不传'content'参数时，可通过<div slot="content">内容</div>插槽展示内容
        content: {
            type: [String, Number],
            default: ''
        },
        // 提示框出现的位置，可选值为
        placement: {
            validator (value) {
                return common.oneOf(value, [
                    'top', 
                    'top-start', 
                    'top-end', 
                    'bottom', 
                    'bottom-start', 
                    'bottom-end', 
                    'left', 
                    'left-start', 
                    'left-end', 
                    'right', 
                    'right-start', 
                    'right-end'
                ]);
            },
            default: 'top'
        },
        // 宽度，最小宽度为 150px，在 confirm 模式下，默认最大宽度为 300px
        width: {
            type: [String, Number]
        },
        // 是否开启对话框模式
        confirm: {
            type: Boolean,
            default: false
        },
        // 确定按钮的文字，只在 confirm 模式下有效
        okText: {
            type: String
        },
        // 取消按钮的文字，只在 confirm 模式下有效
        cancelText: {
            type: String
        },
        // 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果
        transfer: {
            type: Boolean,
            default () {
                return !this.$IVIEW || this.$IVIEW.transfer === '' ? false : this.$IVIEW.transfer;
            }
        },
        // 给 Poptip 设置 class-name，在使用 transfer 时会很有用
        popperClass: {
            type: String
        },
        // 开启后，超出指定宽度文本将自动换行，并两端对齐
        wordWrap: {
            type: Boolean,
            default: false
        },
        // 自定义间距值
        padding: {
            type: String
        },
        // 是否禁用
        disabled: {
            type: Boolean,
            default: false
        },
        // 出现位置的偏移量
        offset: {
            type: Number,
            default: 0
        },
        // 是否隐藏小三角
        disArrow: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {

        }
    },
    methods: {
        // 在提示框显示时触发
        onPopperShow() {
            this.$emit('on-popper-show')
        },
        // 在提示框消失时触发
        onPopperHide() {
            this.$emit('on-popper-hide')
        },
        // 点击确定的回调，只在 confirm 模式下有效
        onOk() {
            this.$emit('on-ok')
        },
        // 点击取消的回调，只在 confirm 模式下有效
        onCancel() {
            this.$emit('on-cancel')
        }
    }
}
</script>
<style lang="scss" scoped>
    @import '../../../style/_index.scss';
    .cvu-poptip{
        &.cvu-poptip-light{
            /deep/.ivu-poptip-arrow{
                &::after{
                    border-bottom-color: #fff;
                }
            }
            /deep/.ivu-poptip-inner{
                background: #fff;
            }
        }
        &.cvu-poptip-dark{
            /deep/.ivu-poptip-arrow{
                &::after{
                    border-bottom-color: $dark-color;
                }
            }
            /deep/.ivu-poptip-title-inner, /deep/.ivu-poptip-body-content-inner{
                color: #FFF;
            }
            /deep/.ivu-poptip-inner{
                background: $dark-color;
            }
        }
        &.cvu-poptip-disarrow{
            /deep/.ivu-poptip-arrow{
                display: none;
            }
        }
    }
</style>